<template>
  <div
    class="tag-login"
    v-loading="loading"
    element-loading-text="正在登录中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0,0.4)"
  >
    <div class="logo">
      <img src="~@/assets/img/logo.png" alt="" />
      云签
    </div>
    <div class="login-box">
      <div class="login-icon">
        <icon-svg name="iconKey"></icon-svg>
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRule"
        @keyup.enter.native="onSubmit()"
        class="login-form"
      >
        <el-form-item prop="userName">
          <el-input placeholder="请输入用户名" v-model="loginForm.userName">
            <template slot="prepend">
              <icon-svg name="iconLoginUser"></icon-svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" type="password" v-model="loginForm.password">
            <template slot="prepend">
              <icon-svg name="iconLoginPassword"></icon-svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="login-button">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
        </el-form-item>
        <el-form-item class="check-item">
          <el-row>
            <el-col :span="12" align="left">
              <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            </el-col>
            <el-col :span="12" align="right">
              <el-button type="text" @click="$router.push('password')">找回密码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="login-error">{{ errorMsg }}</div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      loginForm: {
        userName: '',
        password: '',
        remember: false
      },
      loginRule: {
        userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 30, message: '密码长度应在6到30个字符之间', trigger: 'blur' }
        ]
      },
      captchaShow: true,
      captchaPath: '',
      errorMsg: ''
    }
  },
  watch: {
    '$store.state.user.initText': function(val) {
      this.errorMsg = val
    }
  },
  created() {
    if (window.localStorage.getItem('password')) this.loginForm.remember = true
  },
  methods: {
    onSubmit() {
      this.errorMsg = ''
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('auth/login'),
            method: 'post',
            data: this.$ajax.setData(this.getParams())
          }).then(({ data }) => {
            if (data && data.code === '0') {
              window.localStorage.setItem('token', data.data)
              if (this.loginForm.remember) {
                // 记住密码，存入localStorage
                let password = new Buffer(this.loginForm.password).toString('base64')
                window.localStorage.setItem('password', password)
              } else {
                window.localStorage.removeItem('password')
              }
              if (this.$route.query.redirect) this.$router.replace(this.$route.query.redirect)
              else this.$router.replace({ name: 'main' })
            } else {
              this.errorMsg = data.data || data.msg
            }
            this.loading = false
          })
        }
      })
    },
    getParams() {
      let params = {
        loginUname: this.loginForm.userName,
        loginPwd: this.$utils.crypto(this.loginForm.password)
      }
      return params
    }
  }
}
</script>

<style lang="scss">
.tag-login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/login_bg_left.png) no-repeat 0px 0px / auto 100%,
    url(~@/assets/img/login_bg_right.png) no-repeat 100% 0px / auto 100%;
  &:before {
    content: '';
    background: #0f49ad;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  input:-internal-autofill-selected {
    box-shadow: inset 0 0 0 1000px #fff !important;
  }
  .logo {
    font-size: 30px;
    color: #fff;
    position: fixed;
    top: 80px;
    left: 100px;
    vertical-align: middle;
    img {
      margin-right: 10px;
    }
  }
  .login-box {
    background-color: #fdfdfd;
    width: 396px;
    height: 350px;
    padding: 30px 50px 0;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -175px;
    margin-right: -198px;
    box-shadow: 0 2px 12px rgba(12, 12, 12, 0.4);
    border-radius: 10px;
  }
  .login-icon {
    font-size: 30px;
    width: 100px;
    height: 100px;
    line-height: 65px;
    text-align: center;
    background-color: #2343b2;
    position: absolute;
    top: 0;
    left: 50%;
    margin: -50px 0 0 -50px;
    border: 20px #fdfdfd solid;
    border-radius: 50%;
  }
  .login-form {
    margin-top: 30px;
    .el-form-item {
      margin-bottom: 30px;
      &.check-item {
        margin-top: -15px;
      }
    }
    .el-input-group__prepend {
      font-size: 16px;
      padding: 0 5px 0 15px;
      color: #e60a00;
      background-color: #fff;
    }
    .el-input__inner {
      border-left: 0;
    }
    .el-input.is-active .el-input__inner,
    .el-input__inner:hover,
    .el-input__inner:focus {
      border-color: #dcdfe6;
    }
    .login-button {
      background-color: #2343b2;
      border-color: #2343b2;
      width: 100%;
      font-size: 16px;
      &.is-disabled {
        background-color: rgb(160, 175, 199);
        border-color: rgb(160, 175, 199);
      }
    }
    .el-button--text {
      color: #606266;
    }
    .login-error {
      text-align: center;
      color: #e60a00;
    }
  }
  .el-loading-spinner {
    i,
    .el-loading-text {
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>
